import React, { Component } from 'react'
import { connect } from 'react-redux'
import { loadAuth } from '../App/actions';


export class Login extends Component {

  constructor() {
    super(...arguments)
    this.handleSubmit = this.handleSubmit.bind(this) 
  }

  handleSubmit (event) {
    event.preventDefault();
    const email = this.refs.email;
    const password = this.refs.password;
    this.props.onloadAuth(email.value, password.value);
    email.value = '';
    password.value = '';
  }


  render() {

    return (
      <div>

        <div className = 'row'>
          <div className="col-lg-12">
            <div className = 'page-header'>
              <h3>Container: Login</h3>
            </div>
          </div>
        </div>

        <div className = 'row'>
          <div className = 'col-lg-6'>
            <div className = 'well'>

              <form className="form-horizontal" onSubmit={this.handleSubmit}>
                
                <fieldset>

                  <div className="form-group">
                    <label for="email" className="col-lg-2 control-label">Email</label>
                    <div className="col-lg-10">
                      <input type="text" ref="email" placeholder="Email" className="form-control"/>
                    </div>
                  </div>

                  <div className="form-group">
                    <label for="password" className="col-lg-2 control-label">Password</label>
                    <div className="col-lg-10">
                      <input type="password" ref="password" placeholder="Enter a password" className="form-control"/>
                    </div>
                  </div>
                  
                  <div className="form-group">
                    <div className="col-lg-10 col-lg-offset-2">
                      <button className="btn btn-success" onClick={this.handleSubmit}><i className="fa fa-sign-in"/>{' '}Log In</button>
                    </div>
                  </div>

                </fieldset>

              </form>

            </div>
          </div>
        </div>


      </div>

      
    )
  }
}

function mapStateToProps(state, ownProps) {
  return {}
}


function mapDispatchToProps(dispatch) {
  return {
    onloadAuth: (email, password) => dispatch( loadAuth(email, password) ),
    dispatch,
  };
}

module.exports = connect(mapStateToProps, mapDispatchToProps)(Login);




